<template>
  <div class="orders-container">
    <NavBar />
    <userInfo />
    <div class="orders-content">
      <h1>My History Orders</h1>
      <div v-if="orders.length === 0" class="no-orders">
        No orders yet
      </div>
      <div v-else class="orders-list">
        <div v-for="order in orders" :key="order.orderId" class="order-card">
          <div class="order-header">
            <span class="order-id">Order ID: {{ order.orderId }}</span>
            <span class="seller-name">{{ order.sellerName }}</span>
            <span class="order-time">{{ order.createTime }}</span>
          </div>
          <div class="order-details">
            <div class="product-info">
              <img src="https://avatars.mds.yandex.net/i?id=096ac445d873457cb95b4d0cc016679a1fe78ee5-9065974-images-thumbs&n=13" :alt="order.goodsName" class="product-image">
              <div class="product-details">
                <h3>goods: {{ order.goodsName }}</h3>
                <p>seller: {{ order.sellerName }}</p>
                
              </div>
            </div>
            <div class="order-summary">
              
              <p>Shipping Address: Xidian University</p>
              <p v-if="new Date().getTime()-order.createTime>=3" class="order-status" >shipped</p>
              <p v-else class="order-status" >shipping</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserOrdersView'
}
</script>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import store from '../store';
import NavBar from '@/components/NavBar.vue';
import userInfo from '@/components/UserInfo.vue';


const orders = ref([]);

// 获取用户订单数据的API调用（后端接口数据）
const fetchOrders = async () => {
  const response = await axios.get(`http://localhost:8080/api/userOrder/list?username=${store.getters['user/username']}`)
  .then(result => {
    console.log(result.data.data);
    orders.value = result.data.data.map(order => ({
      orderId: order.orderid,
      createTime: order.createtime,
      goodsName: order.goods,
      sellerName: order.seller,
    }));
    console.log(orders.value);
  })
  .catch(error => {
    console.log(error);
    alert('获取订单失败');
  });
}

// 新增：映射后端订单状态到前端显示文本
// const mapOrderStatus = (status) => {
//   const statusMap = {
//     'pending': '待付款',
//     'paid': '已付款',
//     'shipped': '已发货',
//     'completed': '已完成',
//     'cancelled': '已取消'
//   };
//   return statusMap[status] || '未知状态';
// };

// 示例数据
// const getMockOrders = () => [
//   {
//     orderId: 'ORD' + Math.floor(Math.random() * 1000000),
//     createTime: Date.now(),
//     goodsName: '索尼720耳机',
//     goodsImage: 'https://via.placeholder.com/100',
//     number: 1,
//     price: 799.00,
//     address: '西电海棠8号楼',
//     status: '已发货'
//   }
// ];



// 保持原有的日期格式化函数
// const formatDate = (timestamp) => {
//   if (!timestamp) return '';
//   const date = new Date(timestamp);
//   return date.toLocaleString('zh-CN', {
//     year: 'numeric',
//     month: '2-digit',
//     day: '2-digit',
//     hour: '2-digit',
//     minute: '2-digit',
//     second: '2-digit'
//   });
// };

onMounted(() => {
  fetchOrders();
});
</script>


<style scoped>
.orders-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.orders-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.no-orders {
  text-align: center;
  color: #666;
  font-size: 18px;
  padding: 50px;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease;
}

.order-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.order-id {
  font-weight: bold;
  color: #333;
}

.order-time {
  color: #666;
}

.order-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-info {
  display: flex;
  gap: 20px;
  align-items: center;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

.product-details h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 18px;
}

.product-details p {
  margin: 5px 0;
  color: #666;
}

.order-summary {
  text-align: right;
}

.order-summary p {
  margin: 5px 0;
  color: #333;
}

.order-summary p:first-child {
  font-weight: bold;
  color: #e74c3c;
  font-size: 18px;
}

.order-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.待付款 {
  background-color: #fff3cd;
  color: #856404;
}

.已付款 {
  background-color: #d4edda;
  color: #155724;
}

.已发货 {
  background-color: #cce5ff;
  color: #004085;
}

.已完成 {
  background-color: #e2e3e5;
  color: #383d41;
}

.已取消 {
  background-color: #f8d7da;
  color: #721c24;
}
</style>